<template>
  <div>
    <van-nav-bar fixed title="采购中心" />
    <div class="has-top " style="height:100vh">
      <div class="mlr-32 mt-40">
        <!-- 个人信息 -->
        <div class="flex-v-c">
          <headPortrait-box
            class="pos-r br-full ml-20 dib is-120"
            :head-portrait-url="purchaseMember.Image"
          />
          <div class="ml-20">
            <p class="fs-36 fw-500">{{ purchaseMember.NickName }}</p>
            <div class="mt-15 flex-fs-c edit-box" @click="settingShow=true">
              <svg-icon icon-class="edit" class="mr-10" @goPage="settingShow=true" />
              <span>资料管理</span>
            </div>
          </div>
        </div>
        <!-- 功能区 -->
        <div v-show="purchaseMember.IsSupplier===1" class="mt-40 flex-s-c">
          <div class="btn-item" :style="{backgroundImage:'url('+require('@/assets/images/purchase-4.png')+')'}" @click="goOrder">
            <svg-icon icon-class="purchase-order" class="fs-50 mt-28" />
            <p class="btn-item-tle">
              <span>采购下单</span>
              <span class="arrowBox" />
            </p>
          </div>
          <div class="btn-item" :style="{backgroundImage:'url('+require('@/assets/images/purchase-5.png')+')'}" @click="goShare">
            <svg-icon icon-class="purchase-share" class="fs-50 mt-28" />
            <p class="btn-item-tle">
              <span>共享库存</span>
              <span class="arrowBox" />
            </p>
          </div>
        </div>
        <div v-show="purchaseMember.IsSupplier===0" class="mt-40 flex-s-c">
          <div class="btn-item-1 tar " :style="{backgroundImage:'url('+require('@/assets/images/purchase-6.jpg')+')'}" @click="goOrder">
            <p class="btn-item-tle flex-fe-c">
              <span>采购下单</span>
              <span class="arrowBox" />
            </p>
          </div>
        </div>
        <div>
          <div class="item arrow flex-s-c" @click="gotoCar">
            <p class="flex-v-c">
              <svg-icon icon-class="car-new" class="fs-48 color-primary mr-27" @goPage="gotoCar" />
              <span>
                购物车
              </span>
            </p>
          </div>
          <div class="item arrow flex-s-c" @click="goList('-1')">
            <p>
              <img :src="require('@/assets/images/purchase-0.png')">
              <span>
                采购订单
              </span>
            </p>
            <span v-show="personData.MyAllCount&&personData.MyAllCount>0" class="num">{{ personData.MyAllCount }}</span>
          </div>
          <div v-show="purchaseMember.IsSupplier===1" class="item arrow flex-s-c" @click="goList('0')">
            <p>
              <img :src="require('@/assets/images/purchase-1.png')">
              <span>
                供货订单
              </span>
            </p>
            <span v-show="(personData.SendOrdCount&&personData.SendOrdCount>0)||(personData.CheckOrdCount&&personData.CheckOrdCount>0)" class="num">{{ personData.CheckOrdCount+personData.SendOrdCount }}</span>
          </div>
          <div v-show="purchaseMember.IsSupplier===1" class="item arrow flex-s-c" @click="goList('1')">
            <p>
              <img :src="require('@/assets/images/purchase-2.png')">
              <span>
                审核订单
              </span>
            </p>
            <span v-show="personData.CheckOrdCount&&personData.CheckOrdCount>0" class="num">{{ personData.CheckOrdCount }}</span>
          </div>
          <div v-show="purchaseMember.IsSupplier===1" class="item arrow flex-s-c" @click="goList('2')">
            <p>
              <img :src="require('@/assets/images/purchase-3.png')">
              <span>
                发货订单
              </span>
            </p>
            <span v-show="personData.SendOrdCount&&personData.SendOrdCount>0" class="num">{{ personData.SendOrdCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人设置弹窗 -->
    <van-popup v-model="settingShow" position="bottom" class="bottom-popup">
      <setting :model="purchaseMember" @back="settingShow=false" @save="saveSuccess" />
    </van-popup>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import setting from 'components/purchase/setting'
import { GetPurchaseMemberCenter } from 'api/purchase'
export default {
  components: { headPortraitBox, setting },
  data() {
    return {
      personData: {},
      purchaseMember: {},
      settingShow: false
    }
  },
  computed: {},
  created() {
    this.GetPurchaseMemberCenter()
  },

  methods: {
    gotoCar() {
      this.$router.push('/purchase/car')
    },
    goOrder() {
      this.$router.push('/purchase/order')
    },
    goShare() {
      this.$router.push('/purchase/shareStore')
    },
    goList(type) {
      this.$router.push('/purchase/orderList/' + type)
    },
    saveSuccess(val) {
      this.purchaseMember = val
      this.settingShow = false
    },
    GetPurchaseMemberCenter() {
      GetPurchaseMemberCenter().then(res => {
        if (res && res.Data) {
          this.personData = res.Data || {}
          if (this.personData.PurchaseMember) {
            this.purchaseMember = this.personData.PurchaseMember
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom: none;
}
.edit-box{
  display: inline-block;
  padding: 5px 15px;
  border-radius: 25px;
  border: 1px solid $color9;
}
.btn-item,.btn-item-1{
  width: 330px;
  height: 180px;
  padding-left: 25px;
  background-size: 100% 100%;
  color: $colorF;
  .btn-item-tle{
    margin-top: 22px;
    font-size: 32px;
    .arrowBox {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-left: 16px;
      border-radius: 100%;
      background: rgba(255,255,255,0.3);
      position: relative;
      &:after{
        content: '';
        position: absolute;
        height: 8px;
        width: 8px;
        left: 3px;
        top: 5px;
        border: 1px solid;
        border-color: transparent currentColor currentColor transparent;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg); /* IE 9 */
        -moz-transform: rotate(-45deg); /* Firefox */
        -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
        -o-transform: rotate(-45deg);
      }
    }
  }
}
.btn-item-1{
  width: 100%;
  height: 180px;
  padding-left: 25px;
  background-size: 100% 100%;
  color: $colorF;
  .btn-item-tle{
    font-size: 40px;
    margin-top: 60px;
    margin-right: 40px;
    .arrowBox {
      width: 40px;
      height: 40px;
      margin-left: 22px;
      &:after{
        content: '';
        position: absolute;
        height: 12px;
        width: 12px;
        left: 8px;
        top: 12px;
      }
    }
  }
}
.item{
  position: relative;
  padding: 37px 50px 37px 27px;
  border-radius: 12px;
  background: $colorF;
  margin-top: 20px;
  &:first-child{
    margin-top: 40px;
  }
  &:after{
    right: 20px;
    top: 54px;
    color: $color9;
  }
  p{
    vertical-align: middle;
    img{
      height: 48px;
      width: 48px;
      margin-right: 27px;
      vertical-align: middle;
    }
    span{
      vertical-align: middle;
      line-height: 48px;
      font-size: 30px;
      display: inline-block;
      font-weight: 500;
    }
  }
  .num{
    font-size: 24px;
    line-height: 30px;
    padding:0 8px;
    color: $colorF;
    background: $red;
    border-radius: 15px;
  }
}
.bottom-popup{
  min-height: 100vh;
  background: $colorF5;
}
</style>
